<template>
  <div class="page">
    <el-row>
      <el-col class="title">
        <h2>欢迎登录</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10" :offset="7">
        <el-form ref="loginForm" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="邮箱" prop="username">
            <el-input v-model="form.username" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-row>
              <el-col :span="8">
                <el-input  v-model="form.code" placeholder="请输入验证码"></el-input>
              </el-col>
              <el-col :span="8" :offset="1">
                <div class="code-container" v-html="verify" @click="getCaptcha"></div>
              </el-col>
              <el-col :span="4" :offset="1">
                <el-button type="text" @click="$router.push('/forget')">忘记密码？</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login('loginForm')">登录</el-button>
            <el-button @click="reset('loginForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { v4 } from "uuid";
import { getCaptcha } from '@/api/public.api';
import { local } from '@/utils/storage';
import { mapActions } from 'vuex';
import { USER_LOGIN } from '@/store/action.types';

export default {
  data() {
    return {
      verify: '验证码',
      uuid: '',
      form: {
        username: '',
        password: '',
        code: '',
      },
      rules: {
        username: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入您的邮箱'));
              } else if (!/[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
                callback(new Error('您输入的邮箱格式不正确!'));
              } else {
                callback();
              }
            },
          },
        ],
        password: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入密码'));
              } else if (
                !/(?=.*[a-z])(?=.*[_])(?=.*\d)|(?=.*[a-z])(?=.*\d)[^]{8,}$/.test(value)
              ) {
                callback(new Error('密码应为8位以上字母、数字或下划线组成'));
              } else {
                callback();
              }
            },
          },
        ],
        code: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入验证码'));
              } else if (value.length !== 4) {
                callback(new Error('验证码长度必须为4位'));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  methods: {
    ...mapActions('user', [USER_LOGIN]),
    login(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this[USER_LOGIN]({
            ...this.form,
            uid: this.uuid,
          });
        }
      });
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    async getCaptcha() {
      const { data } = await getCaptcha();
      this.verify = data;
    },
  },
  async created() {
    this.uuid = await local.get('uuid');
    if(!this.uuid){
      local.set('uuid', v4());
    }
    this.getCaptcha();
  },
};
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  line-height: 50px;
  margin-bottom: 30px;
}
.code-container{
  height: 40px;
  width: 150px;
}
</style>
